<template>
  <div id="map_container"
       class="map-container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs, watch } from 'vue'
import { initMap, snowStyle } from './public/common'
import { state } from './public/data'
import { Circle } from './circle'

export default defineComponent({
  name: 'Map',
  props: {
    inters: {
      type: Array,
      default: () => {
        ;[]
      },
    },
  },
  emits: ['showAlarm', 'interDetail', 'warnShow', 'inspection'],
  setup(props, { emit }) {
    onMounted(() => {
      methods.init()
    })

    /**
     * @Description 监听路口数据变化，重新绘制点
     * @date 2021-03-08
     * @param {any} (
     * @returns {any}
     */
    watch(
      () => props.inters,
      () => {}
    )

    const methods = {
      init() {
        state.map = initMap({
          tilt: 10,
          heading: 0,
          center: [118.876049, 31.931099],
          zoom: 15,
          style: snowStyle,
          skyColors: [
            // 地面颜色
            'rgba(226, 237, 248, 0)',
            // 天空颜色
            'rgba(186, 211, 252, 1)',
          ],
        })

        // 2. 创建MapVGL图层管理器
        state.view = new mapvgl.View({
          map: state.map,
        })

        // 标记点设置，这边使用的是 圆点特效
        Circle(emit)
      },
    }

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style lang="less">
@import './public/map.less';
</style>